<template>
  <div>
    <div class="styleAddOrEditBox">
      <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
      <div class="search">
        <span>样式名称：</span>
        <el-input class="searchSelect" v-model.trim="styleName" placeholder="请输入样式名称" size="mini"></el-input>
      </div>
      <div class="content">
        <appSessionWindow
          ref="sessionWindowRef"
          :type="'wechatApp'"
          :isShowSaveAs="!styleId ? false : true"
          @saveFun="saveFun">
        </appSessionWindow>
      </div>
    </div>
    <!-- 另存为窗口 -->
    <el-dialog
      :modal-append-to-body="false"
      lock-scroll
      title="另存为新样式"
      :visible.sync="isShowSaveAs"
      width="30%">
      <span>
        <el-form
          size="mini" :model="saveAsForm" label-position="top" :rules="saveAsFormRule">
          <el-form-item label="样式名称" prop="saveAsName">
            <el-input v-model.trim="saveAsForm.saveAsName" placeholder="请输入样式名称" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveAsChannel">取 消</el-button>
        <el-button type="primary" @click="saveAsSureFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import { channelConfigMoudle } from '@/store/modules/config/channel/index'
import { deepClone } from '@/utils/common'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import appSessionWindow from '@/views/config/webchat/channel/base/appSessionWindow.vue'
// eslint-disable-next-line no-unused-vars
import { Form as ElForm } from 'element-ui'
@Component({
  name: 'sdkStyleAddOrEdit',
  components: { breadcrumb, appSessionWindow }
})
export default class SdkStyleAddOrEdit extends Vue {
  @Ref() private readonly sessionWindowRef !: appSessionWindow
  @Prop({ default: [] }) private titleArr!: any
  private $bus: any
  private $message: any

  private isShowSaveAs = false // 是否展示另存为

  public styleId = '' // 样式id

  public styleName = '' // 样式名

  private saveAsForm = { // 样式名称
    saveAsName: ''
  }

  private saveAsFormRule = {
    saveAsName: [{ required: true, trigger: 'blur', message: '样式名称必填' }]
  }

  private saveFun () { // 保存事件
    this.$nextTick(() => {
      const formRef = this.sessionWindowRef.$refs.sessionWindowForm as ElForm
      const sessionWindow = deepClone(this.sessionWindowRef.sessionWindowForm) // 会话窗口数据
      if (!this.styleName) {
        this.$message.error('请输入样式名称')
        return false
      }
      formRef.validate(valide => {
        if (valide) {
          let sendUrl = '/im-wxsdk/action/config/wxsdkCsstmp/save'
          // {name: 样式名称，type: 接入渠道， sessionWindow: 会话窗口数据}
          delete sessionWindow.leftTitleBtnText
          delete sessionWindow.leftTitleBtnImgUrl
          delete sessionWindow.isTransferSeatsShow
          delete sessionWindow.isCloseSeatsSessionShow
          delete sessionWindow.transferSeatsBtnText
          delete sessionWindow.transferSeatsBtnImgUrl
          delete sessionWindow.closeSeatsSessionBtnText
          delete sessionWindow.closeSeatsSessionBtnImgUrl
          const sendData: any = {
            name: this.styleName,
            type: 'wxsdk',
            sessionWindow
          }
          let successMsg = '添加样式成功'
          if (this.styleId) { // 编辑操作
            sendUrl = '/im-wxsdk/action/config/wxsdkCsstmp/update'
            successMsg = '编辑样式成功'
            sendData._id = this.styleId
          }
          if (this.isShowSaveAs) { // 另存为操作
            if (!this.saveAsForm.saveAsName) {
              this.$message.error('请输入样式名称')
              return false
            }
            delete sendData._id // 另存为时不传_id
            sendData.name = this.saveAsForm.saveAsName
            sendUrl = '/im-wxsdk/action/config/wxsdkCsstmp/save'
            successMsg = '添加样式成功'
          }
          const actionData = { url: sendUrl, method: 'POST', data: sendData }
          channelConfigMoudle.channelCommonAction(actionData).then(res => {
            if (res) {
              this.$message.success(successMsg)
              this.isShowSaveAs = false
              if (!sendData._id) {
                (this as any).$addOneCache('wxsdkCssList', res.data, true) // 更新样式缓存
              } else {
                (this as any).$updateCache('wxsdkCssList', res.data, '_id', true) // 更新样式缓存
              }
              this.$emit('saveFun', sendData)
            }
          })
        }
      })
    })
  }

  private breadcrumbBack () { // 面包屑返回
    this.$emit('pageBack')
  }

  private saveAsSureFun () { // 另存为保存事件
    this.saveFun()
  }

  private saveAsChannel () { // 另存为取消事件
    this.saveAsForm.saveAsName = ''
    this.$bus.$emit('sdkEdit')
    this.isShowSaveAs = false
  }

  private mounted () {
    this.$bus.$on('saveAsFun', () => {
      this.isShowSaveAs = true
    })
  }

  private beforeDestroy () {
    this.$bus.$off('saveAsFun')
  }
}
</script>
<style lang="stylus" scoped>
  .styleAddOrEditBox
    border 1px solid $border-main
    border-radius 10px
    height 100%
    overflow auto
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    box-sizing border-box
    margin 0 2px 2px 0
    background-image -webkit-radial-gradient(#E0E6F0 2px, rgba(0, 0, 0, 0) 2px)
    background-image radial-gradient(#E0E6F0 2px, rgba(0, 0, 0, 0) 2px)
    background-size 20px 20px
    .search
      padding 24px
    .searchSelect
      margin 0px 23px 0px 10px
      display inline-block
      width 150px
    .content
      padding 0 24px 24px
      height calc(100% - 136px)
</style>
